<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:action name="header" executeResult="true">
	<s:param name="titles">Thêm sản phẩm</s:param>
</s:action>
<script type="text/javascript" src="js/ckfinder/ckfinder.js"></script>

<script type="text/javascript">
var num = 0;
function chooseFile(numb)
{
	num = numb;
    // You can use the "CKFinder" class to render CKFinder in a page:
    var finder = new CKFinder();
    finder.basePath = '/js/ckfinder/'; // The path for the installation of CKFinder (default = "/ckfinder/").
    finder.selectActionFunction = SetFileField;
    finder.popup();
} 
// This is a sample function which is called when a file is selected in CKFinder.
function SetFileField( fileUrl,data )
{
    document.getElementById( 'file_name_'+num ).src = data['fileUrl'].substr(1);
    document.getElementById( 'file_url_'+num ).value = data['fileUrl'].substr(1);
}
</script>
<s:action name="managesidebar" executeResult="true" />

<!-- Center -->
<div id="center_column_des" class="center_column">

<div class="breadcrumb">
	<a href="<s:url action="index"></s:url>">Trang chủ</a><span class="navigation-pipe">&gt;</span><span class="navigation_page">Thêm sản phẩm</span>
</div>

<!-- /Breadcrumb -->
	<form action="<s:url action="addproduct"></s:url>" method="post" class="std" enctype="multipart/form-data" name="addS" id="addS">
		<fieldset>
			<h3>Thêm sản phẩm</h3>
			<table class="form">
				<tr>
					<td>Tên sản phẩm :</td>
					<td><input type="text" name="title" id="title" maxlength="50" value="" style="width:550px;"/></td>
				</tr>				
				<tr>
					<td style="vertical-align:middle;">Mô tả :</td>
					<td><textarea rows="5" cols="80" name="desc" id="desc" style="width:550px;"></textarea></td>
				</tr>
				<tr>
					<td>Giá tiền(VNĐ):</td>
					<td><input onkeypress="return isNumberKey(event)" type="text" name="price" id="price" maxlength="9" value="" style="width:150px;"/></td>
				</tr>
				<tr>
					<td>Số lượng :</td>
					<td><input  onkeypress="return isNumberKey(event)" type="text" name="stock" id="stock" maxlength="3" value="" style="width:150px;"/></td>
				</tr>
				<tr>
					<td>Danh mục :</td>
					<td>
					<s:set name="childCate" value="childCate"/>
					<select name="cate" id="cate">
						<s:iterator value="parentCate" var="parent">
							<option value="<s:property value="#parent.category_id"/>"							
							<s:if test="%{#childCate[#parent.category_id] != null}"> 
								disabled
							</s:if>>
							<s:property value="#parent.title"/>							
							</option>
							<s:iterator value="#childCate[#parent.category_id]" var="child">
								<option value="<s:property value="#child.category_id"/>" >
								|---<s:property value="#child.title"/>							
								</option>
							</s:iterator>							
						</s:iterator>
					</select>					
					</td>
				</tr>
				<tr>
					<td>Trạng thái :</td>
					<td><select name="enabled" id="enabled">				
						<option value="0" >Ẩn</option>
						<option value="1" >Hiện</option>
					</select></td>
				</tr>																
				<tr>
					<td style="vertical-align:middle;">Hình chính :</td>
					<td>
					<img title="Click để đổi hình" onclick="chooseFile(0)" id="file_name_0" style="cursor: pointer;" src="images/noslide.png" onerror="this.src='images/noslide.png'" width="250" />
					<input type="hidden" value="" name="fileUrl0" id="file_url_0" />										
					</td>
				</tr>
				<tr>
					<td style="vertical-align:middle;">Hình phụ :</td>
					<td>
						<div style="width:49%;text-align:center;float:left;">
							<img title="Click để đổi hình" onclick="chooseFile(1)" id="file_name_1" style="cursor: pointer;padding:5px;" src="images/noslide.png" onerror="this.src='images/noslide.png'" width="250" />
							<input type="hidden" value="" name="fileUrl1" id="file_url_1" />
							<br/>
							<a href="#" style="color:blue;text-decoration: none" title="Xóa hình 1" onclick="removeImage(1);return false;">[Xóa hình]</a>
						</div>
						<div style="width:49%;text-align:center;float:left;">
							<img title="Click để đổi hình" onclick="chooseFile(2)" id="file_name_2" style="cursor: pointer;padding:5px;" src="images/noslide.png" onerror="this.src='images/noslide.png'" width="250" />
							<input type="hidden" value="" name="fileUrl2" id="file_url_2" />
							<br />
							<a href="#" style="color:blue;text-decoration: none" title="Xóa hình 2" onclick="removeImage(2);return false;">[Xóa hình]</a>						
						</div>
						<div style="width:49%;text-align:center;clear:both">
							<img title="Click để đổi hình" onclick="chooseFile(3)" id="file_name_3" style="cursor: pointer;padding:5px;" src="images/noslide.png" onerror="this.src='images/noslide.png'" width="250" />
							<input type="hidden" value="" name="fileUrl3" id="file_url_3" />
							<br />
							<a href="#" style="color:blue;text-decoration: none" title="Xóa hình 3" onclick="removeImage(3);return false;">[Xóa hình]</a>							
						</div>										
					</td>
				</tr>				
			</table>
			<p class="submit" style="padding:10px 0 0 250px;">
				<input type="submit" name="submitSlideshow" id="submitSlideshow"
					value="Lưu" class="button_large">
			</p>
		</fieldset>
		<s:hidden id="saction" name="paction" value="process"></s:hidden>
	</form>
	<!-- /MODULE contact -->
<script type="text/javascript">
$().ready(function() {
	$('#submitSlideshow').click(function() { 		 
        $(".error").remove();
        var hasError = false;

        var titleVal = $("#title").val();
        var descVal = $("#desc").val();
        var priceVal = $("#price").val();
        var stockVal = $("#stock").val();
        var imageVal = $("#file_url_0").val();

        if($.trim(titleVal) == '') {
            $("#title").after('<span style="margin-left: 5px;margin-top: 5px;color: #CC0000;" class="error">Vui lòng nhập tên sản phẩm.</span>');
            hasError = true;
        }
        
        if($.trim(descVal) == '') {
            $("#desc").after('<span style="margin-left: 5px;margin-top: 5px;color: #CC0000;" class="error" >Vui lòng nhập mô tả sản phẩm.</span>');
            hasError = true;
        }        
        if($.trim(priceVal) == '') {
            $("#price").after('<span style="margin-left: 5px;margin-top: 5px;color: #CC0000;" class="error">Vui lòng nhập giá sản phẩm.</span>');
            hasError = true;
        }
        
        if($.trim(stockVal) == '') {
            $("#stock").after('<span style="margin-left: 5px;margin-top: 5px;color: #CC0000;" class="error" >Vui lòng nhập số lượng sản phẩm.</span>');
            hasError = true;
        }
        
        if($.trim(imageVal) == '') {
            $("#file_url_0").after('<span style="margin-left: 5px;margin-top: 5px;color: #CC0000;" class="error" >Vui lòng nhập chọn hình chính cho sản phẩm.</span>');
            hasError = true;
        }        
        if(hasError == true) { return false; }

    }); 
});
function isNumberKey(evt)
{
   var charCode = (evt.which) ? evt.which : event.keyCode
   if (charCode > 31 && (charCode < 48 || charCode > 57))
      return false;

   return true;
}
function removeImage(numb){
	document.getElementById( 'file_name_'+numb ).src = "images/noslide.png";
    document.getElementById( 'file_url_'+numb ).value = "";
}
</script>	
</div>

<s:action name="footer" executeResult="true" />